<template>
  <Widget :config="config" v-slot="{ isEditing, isMoving }" move-handles="top-bottom">
    <div class="widget-default-style p-1" style="min-width: 5rem;">
      <template v-if="true">
        <div v-if="!isEditing" class="text-gray-100 m-1 leading-4 text-center">{{ config.wmTitle || 'Untitled' }}</div>
        <input v-else
          class="leading-4 rounded text-gray-100 p-1 bg-gray-700 w-full mb-1"
          :placeholder="t('widget.title')"
          v-model="config.wmTitle">
      </template>
      <DndContainer tag="div" class="flex gap-x-1"
        v-model="config.images" item-key="id"
        handle="[data-qa=drag-handle]" :animation="200" :force-fallback="true">
        <template #item="{ element: img }">
          <div :class="$style.card">
            <FullscreenImage
              :src="img.url"
              :disabled="isEditing || isMoving"
              class="rounded overflow-hidden" />
            <button v-if="isEditing" @click="remove(img.id)"
              class="bg-gray-800 absolute top-0 right-0 rounded-bl text-red-500 leading-none px-2 py-1 flex"><i class="fas fa-times"></i></button>
            <button v-if="isEditing" data-qa="drag-handle"
              class="bg-gray-900 absolute rounded text-gray-400 leading-none w-8 h-8 flex justify-center items-center cursor-move" style="top: calc(50% - 1rem); left: calc(50% - 1rem);"><i class="fas fa-arrows-alt"></i></button>
          </div>
        </template>
        <template #footer v-if="isEditing">
          <div :class="$style.card" class="flex justify-center items-center">
            <input type="file" id="file" class="hidden" accept="image/*" @input="handleFile">
            <label class="text-gray-400 hover:bg-gray-700 py-1 px-2 rounded cursor-pointer" for="file"><i class="fas fa-file-import"></i> {{ t('choose_file') }}</label>
          </div>
        </template>
      </DndContainer>
    </div>
  </Widget>
</template>

<script lang="ts">
import type { WidgetSpec, ImageStripWidget } from '../overlay/interfaces'

export default {
  widget: {
    type: 'image-strip',
    instances: 'multi',
    trNameKey: 'image_strip.name',
    defaultInstances: (): ImageStripWidget[] => {
      return [{
        wmId: 0,
        wmType: 'image-strip',
        wmTitle: 'Cheat sheets',
        wmWants: 'hide',
        wmZorder: null,
        wmFlags: ['invisible-on-blur'],
        anchor: {
          pos: 'tc',
          x: 50,
          y: 10
        },
        images: [
          { id: 1, url: 'syndicate.jpg' }
        ]
      }]
    }
  } satisfies WidgetSpec
}
</script>

<script setup lang="ts">
import { inject, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
import { Host } from '@/web/background/IPC'
import { WidgetManager } from './interfaces'

import DndContainer from 'vuedraggable'
import Widget from './Widget.vue'
import FullscreenImage from '@/web/ui/FullscreenImage.vue'

const props = defineProps<{
  config: ImageStripWidget
}>()

const { t } = useI18n()

const wm = inject<WidgetManager>('wm')!

if (props.config.wmFlags[0] === 'uninitialized') {
  props.config.wmFlags = ['invisible-on-blur']
  props.config.anchor = {
    pos: 'tc',
    x: (Math.random() * (60 - 40) + 40),
    y: (Math.random() * (15 - 5) + 5)
  }
  props.config.images = [{
    id: 1, url: 'syndicate.jpg'
  }]
  nextTick(() => {
    wm.show(props.config.wmId)
  })
}

async function handleFile (e: Event) {
  const target = (e as InputEvent).target as HTMLInputElement
  try {
    const name = await Host.importFile(target.files![0])
    props.config.images.push({
      id: Math.max(0, ...props.config.images.map(_ => _.id)) + 1,
      url: name
    })
  } finally {
    target.value = ''
  }
}

function remove (id: number) {
  props.config.images = props.config.images.filter(_ => _.id !== id)
}
</script>

<style lang="postcss" module>
.card {
  width: 12rem;
  height: 6.5rem;
  @apply p-1;
  @apply bg-gray-800;
  @apply rounded;
  position: relative;
}
</style>
